import React,{Fragment}from "react"
import houtui from "./img/后退 (2).png"
import Mycss from "./style/index.module.css"
import nan from "./img/男.png"
import nv from "./img/女.png"
import vip from "./img/vip.jpg"
import { Tabs, WhiteSpace } from 'antd-mobile';
// 气泡
// import { Popover, NavBar, Icon } from 'antd-mobile';
// const Item = Popover.Item;
// const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;

class MyFriend extends React.Component{
    constructor(){
        super()
        this.state={
          guanzhulists:[],
          guanzhuernum:"",
          fensilist:[],
          fensinum:"",
          isGuanzhu:false,
          avatarUrl:"",
          nickname:"",
          gender:"",
          signature:"",
          userId:""
        //   visible: true,
        //   selected: '',
        }
    }
    //气泡效果
    // onSelect = (opt) => {
    //     // console.log(opt.props.value);
    //     this.setState({
    //       visible: false,
    //       selected: opt.props.value,
    //     });
    //   };
    //   handleVisibleChange = (visible) => {
    //     this.setState({
    //       visible,
    //     });
    //   };
componentWillMount(){
    const isFocus=localStorage.getItem("isGuanzhu")
    this.setState({
        isGuanzhu:isFocus
    })
    //渲染关注列表
    fetch("http://106.12.79.128:666/user/follows?uid=1432372057",{
        credentials:'include'
    })
    .then(body=>body.json())
    .then(res=>{
        console.log(res)
        this.setState({
            guanzhulists:res.follow,
            guanzhuernum:res.follow.length
        })
    })
    //渲染粉丝列表
    fetch("http://106.12.79.128:666/user/followeds?uid=1432372057",{
        credentials:'include'
    })
    .then(body=>body.json())
    .then(res=>{
        console.log(res)
        this.setState({
            fensilist:res.followeds,
            fensinum:res.followeds.length,
            avatarUrl:res.followeds[0].avatarUrl,
            nickname:res.followeds[0].nickname,
            gender:res.followeds[0].gender,
            signature:res.followeds[0].signature,
            userId:res.followeds[0].userId
        })
    })
}
//添加关注
guanzhu(id){
    localStorage.removeItem("isGuanzhu2")
    fetch(`http://106.12.79.128:666/follow?id=${id}&t=1`,{
    credentials:'include'
})
.then(body=>body.json())
.then(res=>{
    if(res.code===200){
        console.log(res)
        this.setState({
            isGuanzhu:true
        })
     localStorage.setItem("isGuanzhu",this.state.isGuanzhu)
    }
})
const obj={
    avatarUrl:this.state.avatarUrl,
    nickname:this.state.nickname,
    gender:this.state.gender,
    signature:this.state.signature,
    userId:this.state.userId
}
this.state.guanzhulists=[obj,...this.state.guanzhulists]
this.state.guanzhuernum=this.state.guanzhuernum+1
}
//取消关注
quxiaoguanzhu(id){
    localStorage.removeItem("isGuanzhu")
    fetch(`http://106.12.79.128:666/follow?id=${id}&t=0`,{
        credentials:'include'
    })
    .then(body=>body.json())
    .then(res=>{
        if(res.code===200){
            console.log(res)
            this.setState({
                isGuanzhu:false
            })
         localStorage.setItem("isGuanzhu2",this.state.isGuanzhu)
        }
    })
    this.state.guanzhulists=this.state.guanzhulists.filter(item=>item.userId!==id)
    this.state.guanzhuernum=this.state.guanzhuernum-1
}
componentDidMount(){
    this.setState({})
}
jump(){
    this.props.history.push({pathname:"/gen/My"})
}
render(){
    const tabs = [
        { title: `关注(${this.state.guanzhuernum})` },
        { title: `粉丝(${this.state.fensinum})` },
        { title: '添加好友' },
      ];
    return (
        <Fragment>
            <div className={Mycss.friendTop}>
                <img src={houtui} alt="" className={Mycss.friendhoutui} onClick={this.jump.bind(this)}/>
                <div className={Mycss.myfriends}>我的好友</div>
            </div>
            <WhiteSpace />
    <Tabs tabs={tabs} initialPage={0} animated={true} useOnPan={false}>
        {/* 关注列表 */}
      <div style={{  backgroundColor: '#fff' }}>
        <ul>
            {this.state.guanzhulists.map((item,index)=><li key={index} className={Mycss.myFriendss}>
                <div className={Mycss.guanzhulists}><img src={item.avatarUrl} alt="" className={Mycss.guanzhutouxiang}/>
                <div className={Mycss.guanzhuer}>
                <div className={Mycss.guanzhuername}><div className={Mycss.nannv}>
                {item.nickname}{item.vipRights===null?"":<img src={vip} alt="" className={Mycss.vipicon}/>}{item.gender===1?<img src={nan} alt="" className={Mycss.nanicon}/>: <img src={nv} alt="" className={Mycss.nvicon}/>}
                </div></div>
                <div className={Mycss.guanzhuerxinxi}>{item.signature===null?"":`${item.signature}`}</div>
                </div>

                <div className={Mycss.isGuanzhu3} onClick={this.quxiaoguanzhu.bind(this,item.userId)}>已关注</div>
                </div>
            </li>)}
        </ul>
      </div>
      {/* 粉丝列表 */}
      <div style={{ backgroundColor: '#fff' }}>
      <ul>
            {this.state.fensilist.map((item,index)=><li key={index} className={Mycss.myFriendss}>
                <div className={Mycss.guanzhulists}><img src={item.avatarUrl} alt="" className={Mycss.guanzhutouxiang}/>
                <div className={Mycss.guanzhuer}>
                <div className={Mycss.guanzhuername}><div className={Mycss.nannv}>{item.nickname}{item.gender===1?<img src={nan} alt="" className={Mycss.nanicon}/>: <img src={nv} alt="" className={Mycss.nvicon}/>}</div></div>
                <div className={Mycss.guanzhuerxinxi}>{item.signature===""?"":`${item.signature}`}</div>
                </div>
                {this.state.isGuanzhu?<div className={Mycss.isGuanzhu2}>已关注</div>:<div className={Mycss.isGuanzhu} onClick={this.guanzhu.bind(this,item.userId)}>+ 关注</div>}
                </div>
            </li>)}
        </ul>
      </div>
      {/* 添加好友 */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
        
      </div>
    </Tabs>
    <WhiteSpace />
        </Fragment>
    )
}
}
export default MyFriend